<template>
  <view class="app">
    <view class="back-btn mix-icon icon-xiangzuo" @click="navBack"></view>
    <view class="page-tip">线路管理</view>
    <view class="top">
      <view class="item-wrap">
        <view class="item-panel">
          <view class="flag flag-red">待审核</view>
          <view class="item row">
            <view class="item1 column">
              <image
                class="item-img"
                src="/static/zhuanhg.png"
                mode="aspectFit"
              ></image>
              <view class="item-line"></view>
              <image
                class="item-img"
                src="/static/xie2.png"
                mode="aspectFit"
              ></image>
            </view>
            <view class="item2 column">
              <view class="item21 item-title row">
                江苏省 <text class="item-tag"></text> 宿迁市</view
              >
              <view class="item21 item-desc row"> 兰山站点</view>
              <view class="item21 item-line"></view>
              <view class="item21 item-title row"> 江苏省 宿迁市</view>
              <view class="item21 item-desc row"> 兰山站点</view>
            </view>
          </view>
        </view>
      </view>
      <view class="item-wrap">
        <view class="item-panel">
          <view class="flag flag-green">已审核</view>
          <view class="item row">
            <view class="item1 column">
              <image
                class="item-img"
                src="/static/zhuanhg.png"
                mode="aspectFit"
              ></image>
              <view class="item-line"></view>
              <image
                class="item-img"
                src="/static/xie2.png"
                mode="aspectFit"
              ></image>
            </view>
            <view class="item2 column">
              <view class="item21 item-title row">
                江苏省 <text class="item-tag"></text> 宿迁市</view
              >
              <view class="item21 item-desc row"> 兰山站点</view>
              <view class="item21 item-line"></view>
              <view class="item21 item-title row"> 江苏省 宿迁市</view>
              <view class="item21 item-desc row"> 兰山站点</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-btn">
      <mix-button
        ref="confirmBtn"
        text="新增线路"
        :isConfirm="false"
        @onConfirm="showCreateLine"
      ></mix-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    showCreateLine() {
      this.navTo("/pages/mine/createLine");
    },
    navBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: calc(var(--status-bar-height) + 40rpx);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("../../static/page_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
}
.back-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 34rpx;
  color: white;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 40rpx);
  z-index: 90;
  margin-left: -40rpx;
  font-size: 34rpx;
  color: white;
  line-height: 34rpx;
}
.top {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--status-bar-height) + 52rpx);
  .item-wrap {
    width: 700rpx;
    margin: 20rpx auto 0;
    padding: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    .item-panel {
      position: relative;
      background: #f9fafb;
      height: 240rpx;
      border-radius: 14rpx;
      padding: 20rpx;
      .item {
        align-items: start;
        .item1 {
          height: 170rpx;
          justify-content: space-between;
          align-items: center;
          .item-line {
            border-left: 1px dashed #979797;
            height: 60rpx;
            width: 1px;
          }
          .item-img {
            width: 46rpx;
            height: 46rpx;
          }
        }
        .item2 {
          margin-left: 28rpx;
          justify-content: space-between;
          width: 100%;
          .item21 {
            height: 46rpx;
            align-items: center;
          }
          .item-title {
            font-weight: bold;
          }
          .item-tag {
            display: inline-block;
            margin: auto 16rpx;
            width: 12rpx;
            height: 12rpx;
            border-radius: 12rpx;
            background-color: black;
          }
          .item-line {
            border-bottom: 1px solid #d8d8d8;
            width: 100%;
            height: 1rpx;
            margin: 10rpx auto;
          }
        }
      }

      .flag {
        position: absolute;
        top: 0;
        right: 0;
        padding: 6rpx 10rpx 10rpx 16rpx;
        color: #fff;
        border-radius: 0rpx 14rpx 0rpx 30rpx;
      }
      .flag-red {
        background: linear-gradient(151deg, #f75248 0%, #f5473b 100%);
      }
      .flag-green {
        background: #12c852;
      }
    }
  }
}
.fixed-btn {
  position: absolute;
  left: 0;
  bottom: 6vh;
  z-index: 1;
  width: 100%;
  height: 90rpx;
  font-size: 24rpx;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
</style>
